<template>
    <div>
        <Form :label-width="80" :model="user" :rules="ruleValidate" class="form" ref="userInfo">
            <Alert type="success">基本信息</Alert>
            <div>
                <Row>
                    <Col span="6">
                        <FormItem label="账号" prop="username">
                            <Input placeholder="账号" v-model="user.username" readonly/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="姓名" prop="name">
                            <Input placeholder="姓名" v-model="user.name" readonly/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="民族" prop="nation">
                            <Select v-model="user.nation">
                                <template v-for="item in nations">
                                    <Option :value="item">{{item}}</Option>
                                </template>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="婚姻状态" prop="marriage">
                            <Select v-model="user.marriage">
                                <Option value="未婚">未婚</Option>
                                <Option value="已婚">已婚</Option>
                                <Option value="丧偶">丧偶</Option>
                                <Option value="其他">离婚</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="6">
                        <FormItem label="手机号码" prop="phone">
                            <Input placeholder="手机号码" type="tel" v-model="user.phone"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="健康状态" prop="health">
                            <Input placeholder="健康状态" v-model="user.health"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="现居地" prop="address">
                            <Input placeholder="现住地址" v-model="user.address"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="入职时间" prop="entryTime">
                            <DatePicker v-model="user.entryTime" type="date" placeholder="入职时间"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="6">
                        <FormItem label="银行" prop="bankName">
                            <Input placeholder="银行" v-model="user.bankName"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="银行卡" prop="bankId">
                            <Input placeholder="银行卡号码" type="number" maxlength="19" v-model="user.bankId"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="证件号码" prop="idCard">
                            <Input placeholder="证件号码" v-model="user.idCard"  maxlength="18"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="证件地址" prop="idAddress">
                            <Input v-model="user.idAddress" placeholder="证件地址"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="6">
                        <FormItem label="学历" prop="education">
                            <Select v-model="user.education">
                                <template v-for="item in educations">
                                    <Option :value="item">{{item}}</Option>
                                </template>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="QQ" prop="QQ">
                            <Input placeholder="QQ" type="number" maxlength="10" v-model="user.qq"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="微信" prop="weixin">
                            <Input placeholder="微信" v-model="user.weixin" maxlength="20"/>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="邮箱" prop="email">
                            <Input v-model="user.email" placeholder="邮箱"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="6">
                        <FormItem label="基本工资" prop="salary">
                            <Input placeholder="基本工资" v-model="user.salary"/>
                        </FormItem>
                    </Col>
                    <Col span="6" v-has="this.$res.userModify">
                        <FormItem label="允许修改" prop="modifys" >
                            <Select v-model="user.modifys" :disabled="user.modifys===0">
                                <Option :value="0">是</Option>
                                <Option :value="1">否</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6" v-has="this.$res.userModify">
                        <FormItem label="状态" prop="state">
                            <Select v-model="user.state" :disabled="this.getUserInfo().id===user.userId">
                                <Option :value="0">在职</Option>
                                <Option :value="1">离职</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </div>

            <Alert type="warning">其他</Alert>
            <div>
                <Row>
                    <Col span="8">
                        <FormItem label="紧急联系人" prop="urgentName" :label-width="120">
                            <Input placeholder="紧急联系人" v-model="user.urgentName" maxlength="10"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="紧急联系人关系" prop="urgentRelation" :label-width="130">
                            <Input placeholder="紧急联系人关系" v-model="user.urgentRelation" maxlength="10"/>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="紧急联系人号码" prop="urgentPhone" :label-width="130">
                            <Input placeholder="紧急联系人号码" v-model="user.urgentPhone" type="tel" maxlength="11"/>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <Button v-if="this.user.modifys===0" type="primary" style="float: right;margin-right: 50px;"
                    @click="saveInfo('userInfo',1)">保存
            </Button>
            <!-- 管理员权限并且自身资料以及完成才显示此按钮-->
            <Button v-has="this.$res.userModify" v-if="this.user.modifys===1" type="primary"
                    style="float: right;margin-right: 50px;"
                    @click="saveInfo('userInfo',0)">更新
            </Button>
        </Form>

    </div>


</template>

<script>
    export default {
        name: "userEdit",
        metaInfo: {
            title: '用户基本信息',
        },
        data() {
            return {
                nations: ["汉族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族", "布依族", "朝鲜族", "满族", "侗族", "瑶族", "白族",
                    "土家族", "哈尼族", "哈萨克族", "傣族", "黎族", "傈僳族", "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族", "景颇族", "柯尔克孜族", "土族",
                    "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族", "毛南族", "仡佬族", "锡伯族", "阿昌族", "普米族", "塔吉克族", "怒族", "乌孜别克族", "俄罗斯族", "鄂温克族",
                    "德昂族", "保安族", "裕固族", "京族", "塔塔尔族", "独龙族", "鄂伦春族", "赫哲族", "门巴族", "珞巴族", "基诺族"],
                educations: ['小学', '初中', '高中', '中专', '大专', '本科', '硕士', '博士'],
                user: {
                    userId: '',
                    id: '',
                    username: '',
                    name: '',
                    nation: '',
                    marriage: '',

                    phone: '',
                    health: '',
                    address: '',
                    entryTime: '',

                    bankName: '',
                    bankId: '',
                    idCard: '',
                    idAddress: '',

                    salary: '',
                    urgentName: '',
                    urgentRelation: '',
                    urgentPhone: '',

                    qq: '',
                    weixin: '',
                    email: '',
                    education: '',
                    modifys: '',
                    state: '',


                },
                ruleValidate: {
                    nation: [
                        {required: true, message: '请选择民族信息', trigger: 'blur'}
                    ],
                    marriage: [
                        {required: true, message: '请选择婚姻状态', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写手机号码', trigger: 'blur'}
                    ],
                    health: [
                        {required: true, message: '请填写健康状态', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请填写现住地址', trigger: 'blur'}
                    ],
                    entryTime: [
                        {type: 'date', required: true, message: '请填写入职时间', trigger: 'blur'}
                    ],
                    bankName: [
                        {required: true, message: '请填写入银行名称', trigger: 'blur'}
                    ],
                    bankId: [
                        {required: true, message: '请填写入银行卡号', trigger: 'blur'}
                    ],
                    idCard: [
                        {required: true, message: '请填写入证件号码', trigger: 'blur'}
                    ],
                    idAddress: [
                        {required: true, message: '请填写入证件地址', trigger: 'blur'}
                    ],
                    urgentName: [
                        {required: true, message: '请填写紧急联系人', trigger: 'blur'}
                    ],
                    urgentRelation: [
                        {required: true, message: '请填写与紧急联系人关系', trigger: 'blur'}
                    ],
                    urgentPhone: [
                        {required: true, message: '请填写紧急联系人联系手机号码', trigger: 'blur'}
                    ],
                    education: [
                        {required: true, message: '请选择学历信息', trigger: 'blur'}
                    ],

                }
            }
        },

        mounted() {
            this.getData();
        },
        methods: {
            getData: function () {
                this.$kit.ajaxGet(this.$res.userGetOne, {id: this.$route.query.userId}, (res => {
                    this.user = res.data.data;
                }), this)
            },
            saveInfo: function (name, status) {
                if (status === 1) {
                    // 普通用户完善资料后就编辑为不可用
                    this.user.modifys = status;
                }
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$kit.ajaxPut(this.$res.userUpdate, this.user, (res => {
                            this.$Message.success(res.data.msg)
                        }), this)
                    } else {
                        this.$Message.error("请认真填写个人信息")
                    }
                })
            }
        }


    }
</script>

<style scoped>

</style>
